<template>
  <div>
    <Head/>
    <left/>
    <div style="position: absolute;top: 60px;left: 200px">
      <h1>申请</h1>
      <ul>
        <li v-for="(i,index) in list" :key="i.id">
          <van-field :label="i.lable" v-model="names[index]"></van-field>
          类型：<select name="" id="" v-model="typelist[index]">
          <option value="text">输入框</option>
          <option value="radio">单选框</option>
          <option value="checkbox">多选框</option>
          <option value="file">文件</option>
          <option value="datetime">时间</option>
          <option value="select">下拉框</option>
        </select>
          <van-field label="值"></van-field>
          <van-button round @click="getsource(index)">添加数据源</van-button>
        </li>
      </ul>
      <van-button round @click="add">+</van-button>
      <van-button round @click="sumbit">
        提交
      </van-button>

      <el-dialog v-model="dialogTableVisible" title="选择数据源">
        <el-table
            ref="singleTable"
            :data="tablename"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50"/>

          <el-table-column property="name" label="数据源" width="120"/>

        </el-table>

      </el-dialog>
      <div v-for="i in holiday" :key="i.name">
        <p v-if="i.type=='select'"><select>
          <option :value="j.id" v-for="j in i.value" :key="j.id">{{j.name}}</option>
        </select></p>
        <p v-else>{{ i.name }}<input :type="i.type">
        </p>
      </div>

    </div>
  </div>
</template>

<script>
import Head from "@/components/head";
import left from "@/components/left";
import maxios from "@/http/axios";

export default {
  components: {
    'Head': Head,
    'left': left
  },
  name: "add_shenq",
  data() {
    return {
      id: this.$route.query.id,
      yewu: [],
      list: [{"lable": '名称'}],
      typelist: {},
      valuelist: {},
      names: {},
      dialogTableVisible: false,
      gridData: [{'id': 1, 'name': '请假类型数据源'}, {'id': 2, 'name': '会议地址数据源'}],
      tablename: [],
      holiday: {}
    }
  },
  methods: {
    add() {
      this.list.push({"lable": '名称'})
    },
    sumbit() {
      let list2 = []
      for (var i = 0; i < this.list.length; i++) {
        list2.push({"name": this.names[i], "type": this.typelist[i], "value": this.valuelist[i]})
      }
      console.log(list2)
      this.holiday = list2
      let data = new FormData()
      data.append("id", this.id)
      data.append("list", JSON.stringify(list2))
      maxios('/work/work', 'put', data).then(res => {
        if (res.code == 200) {
          alert('添加成功')
          this.getholiday()
        }
      })
    },
    getsource(index) {
      localStorage.setItem('index', index)
      maxios('/work/source', 'get')
          .then(res => {
            if (res.code == 200) {
              this.tablename = res.list

            }
          })
      this.dialogTableVisible = true

    },
    handleCurrentChange(val) {
      this.dialogTableVisible = false
      let index = localStorage.getItem('index')
      this.valuelist[index] = (val['son'])

    },
    getholiday() {
      maxios('/work/holiday?id=' + this.id, 'get').then(res => {
        this.holiday = JSON.parse(res.list['params'])
        console.log(this.holiday)
      })
    }
  },
  mounted() {


  }
}
</script>

<style scoped>

</style>